<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="Flying hormone" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../css/media.css" />
        <link rel="stylesheet" href="../css/mui.min.css" />
        <link rel="stylesheet" href="../css/head_foot.css" />
        <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="../js/jquery.Query.js" ></script>
        <script type="text/javascript" src="../js/jquery-cookie.js"></script>
        <script type="text/javascript" src="../js/mui.min.js"></script>
        <script type="text/javascript" src="../js/appcan.js"></script>
        <script type="text/javascript" src="../js/appcan.control.js"></script>
        <script type="text/javascript" src="../js/common.js" ></script>
        <link rel="stylesheet" href="../js/webuploader/webuploader.css" />
        <script type="text/javascript" src="../js/webuploader/webuploader.js" ></script>
		<title>设置</title>
		<style>
		      ul{ padding: 0; margin: 0}
		    section{ background: #fff; height: auto; overflow: hidden; margin-bottom: 1em; position: relative;}
		    .info img{ height:4em; width: 4em; float: left; margin: 1em;border-radius: 2em;}
		    .info p{ line-height:1.5em }
		    .info p a{ color: #878787; padding-left: 2em; background: url(../img/fenbi.jpg) no-repeat 1em center; background-size: 1em auto;}
		    .info>a{ border: 1px solid #ccc; padding: 0.5em; position: absolute; right: 1em; top: 2.5em; font-size: 0.8em; color: #878787; border-radius: 0.2em}
		    .main{ padding: 0}
		    .main li{ border-bottom: 0.2em solid #efeff4; padding: 1em; font-size: 1.2em;}
		    .main li a{ color: #878787; }
		    #tuichu{ background: none;}
		    #tuichu button{ font-size: 1.2em; background: #ff3366; color: #fff; width: 90%; margin-left: 5%; padding: 0.2em 1em; border-radius: 0.2em;}
		    
		    .mui-popup.mui-popup-in{ width: 80%;}
		    .mui-popup-title{ font-size:1.2em;}
		    .mui-popup-title+.mui-popup-text{ font-size: 1em;}
		    .mui-popup-input input{ font-size:1em; height: 2em; line-height: 2em;}
		    .mui-popup-button{ font-size: 1em;height: 2em; line-height: 2em;}
		    .mui-popup-buttons{ height: 2em;}
		    .mui-popup-inner{ padding: 1em;}
		    .webuploader-pick{
                 border: 1px solid #ccc; padding: 0.5em; position: absolute; right: 1em; font-size: 0.8em; color: #878787; border-radius: 0.2em;
                 background: #fff;
            }
            input[type=text] {
                font-size: 0.8em;
                padding: 0.5em;
                margin: 0;
                height: 2em;
                line-height: 2em;width:30%;
            }
		</style>
		<style>
            .checkbox{width:100%;height:40px; margin:0px auto; text-align:center}
            .checkbox a{ display:inline-block;width:100px; height:40px; border:solid 1px #f00; color:#f00; text-align:center; line-height:40px; text-decoration:none}
            .cd-popup {
                position: fixed;
                left: 0;
                top: 0;
                height: 100%;
                width: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                opacity: 0;
                visibility: hidden;
                -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
                -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
                transition: opacity 0.3s 0s, visibility 0s 0.3s;
                z-index:9999;
            }
            .cd-popup.is-visible {
                opacity: 1;
                visibility: visible;
                -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
                -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
                transition: opacity 0.3s 0s, visibility 0s 0s;
            }
            .cd-popup-container {
                position: relative;
                width:80%;
                margin:6em auto;
                height:70%;
                background:url(../img/up_bg.png) no-repeat center;
                background-size:100% 100%;
                border-radius: .4rem .4rem .4rem .4rem;
                text-align: center;
                box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
                -webkit-transform:scale(1.2);
                -moz-transform:scale(1.2);
                -ms-transform:scale(1.2);
                -o-transform:scale(1.2);
                transform:scale(1.2);
                -webkit-backface-visibility: hidden;
                -webkit-transition-property: -webkit-transform;
                -moz-transition-property: -moz-transform;
                transition-property: transform;
                -webkit-transition-duration: 0.3s;
                -moz-transition-duration: 0.3s;
                -ms-transition-duration: 0.3s;
                -o-transition-duration: 0.3s;
                transition-duration: 0.3s;
            }
            .cd-popup-close{ 
                    position: absolute;
                    right: 0.7em;
                    top: 0.5em;
                    z-index: 10;
                    width: auto;
                    height: 1em;
                    display: block;
                    font-size: 1em;
                    color: #fff;
            }
            .is-visible .cd-popup-container {-webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1);}
            
            .cd-butt{
                    width: 100%;
                    position: absolute;
                    bottom: 2em;
                    text-align: center;
            }
            .cd-butt a{
                    display: inline-block;
                    width: 39%;
                    height: 2em;
                    line-height: 2em;
                    text-align: center;
                    border-radius: .4rem .4rem .4rem .4rem;
                    margin: 0 5%;
                    font-size: 1em;
                    color: #fff;
            }
            .cd-butt a.cd-cancel{background:#d9d9d9;}
            .cd-butt a.cd-update{background:#fe4170;}
        </style>
	</head>
	<body>
        <header>
            <a><span class="leftleft"></span></a>
            <h1>设置</h1>
        </header>
        <section>
            <script type="text/javascript">
                 /*弹框JS内容*/
                jQuery(document).ready(function($){
                    //打开窗口
                    $('.cd-popup-trigger0').on('click', function(event){
                        event.preventDefault();
                        $('.cd-popup').addClass('is-visible');
                        //$(".dialog-addquxiao").hide()
                    });
                    //关闭窗口
                    $('.cd-popup').on('click', function(event){
                        if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup') || $(event.target).is('.cd-cancel')) {
                            event.preventDefault();
                            $(this).removeClass('is-visible');
                        }
                    });
                    //ESC关闭
                    $(document).keyup(function(event){
                        if(event.which=='27'){
                            $('.cd-popup').removeClass('is-visible');
                        }
                    });
                    $('.cd-update').on('click', function(event){
                        uexClipboard.copy($(this).data("val"));
                        alert("复制地址成功，请打开浏览器进行下载");
                        event.preventDefault();
                        $('.cd-popup').removeClass('is-visible');
                    });
                });
            </script>
            <div class="cd-popup">
                <div class="cd-popup-container">
                    <a href="javascript:;" class="cd-popup-close">X</a>
                    <div class="cd-butt">
                        <a href="javascript:;" class="cd-cancel">下次再说</a>
                        <a href="javascript:;" data-val="" class="cd-update">立即更新</a>
                    </div>
                </div>
            </div>
        </section>
        
        <section class="info">
            <img id="picUrl" src="../img/touxiang.jpg"/>
            <p style="margin-top: 1em">昵称：<span id="displayName"></span><a id="change_name">编辑</a><a id="save_name" style="display:none;">保存</a></p>
            <div id="filePicker">上传头像</div>
        </section>
        
        <section class="main">
            <ul>
                <li><a id="change_password">修改密码</a></li>
                <li><a onclick="openUrl('guanyu.html','guanyu');">关于同城100</a></li>
                <li><a id="update">版本更新</a></li>
            </ul>
        </section>
        <section id="tuichu">
            <button>退出登录</button>
        </section>
        
        <footer>
            <nav class="mui-bar mui-bar-tab">
                <a href="javascript:;" id="tcIndex">
                    <img src="../img/shouye2.png" />
                    <span class="mui-tab-label">首页</span>
                </a>
                <a href="javascript:;" id="myfabu">
                    <img src="../img/fabu2.png" />
                    <span class="mui-tab-label">发布</span>
                </a>
                <a class="action" href="javascript:;" id="myInfo">
                    <img src="../img/mine2.png" />
                    <span class="mui-tab-label">我的</span>
                </a>
            </nav>
        </footer>
        <script>
            $(document).ready(function(){
                var userId = appcan.locStorage.getVal("userId");
                var userName = "";
                var displayName = "";
                //用户信息
                appcan.ajax({
                   type:"get",
                   url:host+"/getUser.json?userId="+userId,
                   dataType:"json",
                   contentType: "application/json",
                   success : function(dataResult) {
                       displayName = dataResult.data.displayName || "";
                       $("#displayName").text(dataResult.data.displayName || "");
                       $("#mobile").text("电话："+(dataResult.data.mobile || ""));
                       userName = dataResult.data.userName;
                       $("#picUrl").attr("src",hostIp+dataResult.data.picUrl);
                   }
                })
                
                // 初始化Web Uploader
                var uploader = WebUploader.create({
                    // 选完文件后，是否自动上传。
                    auto: true,
                    // swf文件路径
                    swf: '../js/webuploader/Uploader.swf',
                    // 文件接收服务端。
                    server: host+"/image/uploadImg.json?userId="+appcan.locStorage.getVal("userId"),
                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                    pick: '#filePicker',
                    duplicate : true,
                    compress :{
                        width: 750,
                        height: 300,
                        // 图片质量，只有type为`image/jpeg`的时候才有效。
                        quality: 90,
                        // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
                        allowMagnify: false,
                        // 是否允许裁剪。
                        crop: false,
                        // 是否保留头部meta信息。
                        preserveHeaders: true,
                        // 如果发现压缩后文件大小比原来还大，则使用原来图片
                        // 此属性可能会影响图片自动纠正功能
                        noCompressIfLarger: false,
                        // 单位字节，如果图片大小小于此值，不会采用压缩。
                        compressSize: 0
                    },
                    // 只允许选择图片文件。
                    accept: {
                        title: 'Images',
                        extensions: 'gif,jpg,jpeg,bmp,png',
                        mimeTypes: 'image/*'
                    }
                });
                
                // 文件上传成功，给item添加成功class, 用样式标记上传成功。
                uploader.on('uploadSuccess', function(file, dataResult) {
                    //用户信息
                    // 保存用户头像
                    var picUrl = dataResult.data.imgUrl;
                    if(picUrl.length > 0){
                        $("#picUrl").attr("src",hostIp+picUrl);
                        appcan.ajax({
                           type:"post",
                           url:host+"/changePicUrl.json?userName="+userName+"&picUrl="+picUrl,
                           dataType:"json",
                           contentType: "application/json",
                           success : function(dataResult) {
                               
                           }
                        })
                    }
                });
                
                uploader.on('uploadError', function(file, reason){
                    if(reason=="F_EXCEED_SIZE"){
                        alert("文件大小不能超过2M");
                    }
                })
                // 文件上传过程中创建进度条实时显示。
                uploader.on( 'uploadProgress', function( file, percentage ) {
                    var percent = (percentage * 100).toFixed(2);
                    if(percent!=100){
                        $(".webuploader-pick").html("正在上传，进度"+percent+"%");
                        $("#filePicker input[name='file']").attr("disabled","disabled");
                    }else{
                        $(".webuploader-pick").html("上传头像");
                        $("#filePicker input[name='file']").removeAttr("disabled");
                    }
                });
                
                $("#change_name").click(function(){
                    $("#displayName").html('<input type="text" class="changeName" value="'+displayName+'">');
                    $("#change_name").hide();
                    $("#save_name").show();
                });
                $("#save_name").click(function(){
                    displayName = $(".changeName").val();
					var param = {
                        userName:userName,
                        displayName:displayName
                    };
                    if(displayName.length > 0){
                        appcan.ajax({
                           type:"post",
                           url:host+"/changeDisplayName.json",
                           dataType:"json",
                           contentType: "application/json",
						   data:JSON.stringify({param:param}),
                           success : function(dataResult) {
                               $("#displayName").html(displayName);
                                $("#change_name").show();
                                $("#save_name").hide();
                           }
                        })
                    }else{
                        alert("请输入昵称！");
                    }
                });
                $("#change_password").click(function(){
                    mui.prompt('','请输入密码','修改密码',['确认','取消'],
                        function(e) {
                            if(e.index == 0){
                                var userPwd = $(".mui-popup-input input").val();
                                // 修改密码
                                if(userPwd.length > 0){
                                    appcan.ajax({
                                       type:"post",
                                       url:host+"/changePwd.json?userName="+userName+"&userPwd="+userPwd,
                                       dataType:"json",
                                       contentType: "application/json",
                                       success : function(dataResult) {
                                           
                                       }
                                    })
                                }else{
                                    alert("请输入密码")
                                }
                            }
                        }
                    ,'div');
                    document.querySelector('.mui-popup-input input').type='password';
                });
                
                $("#tuichu button").click(function(){
                    appcan.locStorage.remove("userId");
                    openUrl('../login/login.html','login');
                });
                
                $("#update").click(function(){
                    appcan.ajax({
                        type:"get",
                        url:host+"/getSysPByKey.json?pKey=version",
                        dataType:"json",
                        success : function(dataResult) {
                            var data = dataResult.data;
                            if(!!data && !!data.pName){
                                // 有更新版本
                                if(version != data.pName){
                                    $('.cd-popup').addClass('is-visible');
                                    $('.cd-update').data("val", hostIp+"/tcimg"+data.pValue);
                                }else{
                                    alert("当前已是最新版本");
                                }
                            }else{
                                alert("当前已是最新版本");
                            }
                        }
                    })
                });
            });
        </script>
    </body>

</html>